<template>
	<view class="contain">
		<view class="containTop">
			<view class="containTopContain">
				<view class="containTopLeft" @click="goBack">
					<image src="@/static/merchantInfo/back.svg" mode=""></image>
				</view>
				<view class="containTopCenter">
					商家信息
				</view>
				<view class="containTopRight">

				</view>
			</view>
			<!-- 头像&公司介绍 -->
			<view class="containTopContainCenter">
				<view class="containTopContainCenterImg">
					<view class="avatar">
						<view class="imgbox">
							<image class="img" src="@/static/LOGO.png">
							</image>
						</view>
					</view>
				</view>
				<view class="containTopContainCenterText">
					熙喆科技
				</view>
			</view>
			<!-- 类别栏 -->
			<view class="containTopBottom">
				<view class="containTopBottomItem" :class="{'active':active == '1' }" @click="onClick('1')">
					商家明细
				</view>
				<!-- 务删，后期会用到 -->
				<!-- <view class="containTopBottomItem" :class="{'active':active == '2' }" @click="onClick('2')">
					商家流水
				</view> -->
			</view>
		</view>
		<view class="containCenter">
			共推广<text>{{total}}</text>条商家信息
		</view>
		<view class="containBottom" v-for="(item,index) in shopList" :key="item.id">
			<!-- 商家信息卡片区域 -->
			<view class="containBottomContain">
				<!-- 头像 -->
				<view class="containBottomContainLeft">
					<image :src="getImgUrl(item.shopsLogo)" mode=""></image>
				</view>
				<!-- 商家信息 -->
				<view class="containBottomContainRight">
					<!--商家信息左部分  -->
					<view class="containBottomContainRightl">
						<view class="containBottomContainRightlTop">
							{{item.shopsName ? item.shopsName :'暂无'}}
						</view>
						<view class="containBottomContainRightlCenter">
							地址：{{item.address ? item.address :'暂无'}}
						</view>
						<view class="containBottomContainRightlBottom">
							<image src="@/static/merchantInfo/vxtubiao.svg" mode=""></image>
							<text>{{item.weixin ? item.weixin : '暂无'}}</text>
						</view>
					</view>
					<!-- 商家信息右部分 -->
					<view class="containBottomContainRightr">
						<view class="containBottomContainRightrt">
							<!-- 经营类别 -->
							<view class="containBottomtLeft">
								{{item.category ?item.category : '暂无'}}
							</view>
							<!-- 编辑 -->
							<view class="containBottomtRight" @click="goEdit(item.id)">
								编辑
							</view>
						</view>
						<!-- 详细信息 -->
						<view class="containBottomContainRightrb">
							<view class="containBottomDetail">
								<text @click="goInfo(item.id)">详细信息</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			到底啦~~~~~
		</view>
	</view>
</template>

<script setup>
	import getImgUrl from '../../utils/img.js'
	import {
		getShopList
	} from '@/api/info.js'
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onShow
	} from '@dcloudio/uni-app'
	const active = ref('1')
	let pageList = reactive({
		pageNum:1,
		pageSize:10
	})
	let shopList = ref([]) //商铺数据
	const total = ref(0)//商铺数量
	// 点击添加边框颜色
	const onClick = (act) => {
		active.value = act
	}
	//获取所有的商家
	onMounted(() => {
		getShopList(pageList).then(res => {
			shopList.value = res.rows
			total.value = res.total
		})
	})
	//获取最新所有的商家
	onShow(() => {
		getShopList(pageList).then(res => {
			shopList.value = res.rows
			total.value = res.total
		})
	})
	//跳转到首页
	const goBack = () => {
		uni.navigateTo({
			url: '/pages/select/index'
		})
	}
	//跳转到商家详情页
	const goInfo = (id) => {
		uni.navigateTo({
			url: '/pages/merchantInfo/info?id=' + id
		})
	}
	//上拉刷新
	onReachBottom(() => {
		pageList.pageNum++
		getShopList(pageList).then(res => {
			shopList.value = [...shopList.value, ...res.rows]
		})
	})
	//跳转到编辑页面
	const goEdit = (id) => {
		uni.navigateTo({
			url: '/pages/merchantInfo/edit?id=' + id
		})
	}
</script>
<style lang="scss" scoped>
	.contain {
		width: 100vw;
		background-color: #f0ecec;

		.bottom {
			width: 100%;
			height: 50rpx;
			background-color: #fff;
			text-align: center;
		}

		.containTop {
			width: 100%;
			height: 400rpx;
			padding: 0 30rpx;
			background: linear-gradient(to right bottom, #9886ff, 30%, #a7c4ff);

			// 页面标题
			.containTopContain {
				width: 100%;
				height: 40%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				// 返回图标
				.containTopLeft {
					width: 50rpx;
					height: 50rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.containTopCenter {
					margin-right: 50rpx;
					font-weight: 600;

				}
			}

			// 页面头像&公司
			.containTopContainCenter {
				width: 100%;
				height: 41%;
				display: flex;

				.containTopContainCenterImg {
					width: 43%;
					height: 100%;

					.avatar {
						width: 180rpx;
						height: 180rpx;
						border: 1rpx solid #fff;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;

						.imgbox {
							width: 120rpx;
							height: 120rpx;

							.img {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.containTopContainCenterText {
					width: 70%;
					height: 100%;
					display: flex;
					align-items: center;
					font-size: 30rpx;
					font-weight: 600;
					padding-left: 20rpx;
				}
			}

			// 商家明细
			.containTopBottom {
				width: 100%;
				height: 28%;
				display: flex;
				align-items: center;

				.containTopBottomItem {
					width: 150rpx;
					height: 50rpx;
					margin: 0 5rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.active {
					border-bottom: 8rpx solid #d99bfd;
				}
			}
		}

		// 总推广数量
		.containCenter {
			width: 100%;
			height: 100rpx;
			background-color: #fff;
			padding-left: 30rpx;
			margin-top: 15rpx;
			display: flex;
			align-items: center;

			text {
				color: red;
			}
		}

		// 商家信息
		.containBottom {
			width: 100vw;
			height: 16vh;
			display: flex;
			justify-content: center;
			margin-top: 10rpx;

			// 商家信息卡片区域
			.containBottomContain {
				width: 95vw;
				height: 200rpx;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;

				// 头像
				.containBottomContainLeft {
					width: 20%;
					height: 80%;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 120rpx;
						height: 120rpx;
						border-radius: 50%;
					}

				}

				// 商家信息介绍
				.containBottomContainRight {
					width: 80%;
					height: 100%;
					padding-right: 20rpx;
					display: flex;

					// 商家信息左部分
					.containBottomContainRightl {
						width: 55%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						// 商家名称
						.containBottomContainRightlTop {
							padding-top: 10rpx;
							font-size: 28rpx;
							font-weight: 600;
						}

						// 商家地址
						.containBottomContainRightlCenter {
							width: 100%;
							height: 75rpx;
							overflow: hidden;
							display: -webkit-box;
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						// vx号码
						.containBottomContainRightlBottom {
							width: 100%;
							height: 40%;
							display: flex;
							align-items: center;

							image {
								width: 70rpx;
								height: 100%;
							}

							text {
								margin-left: 5rpx;
							}
						}
					}

					// 商家信息右部分
					.containBottomContainRightr {
						width: 45%;
						height: 100%;
						padding-top: 30rpx;

						.containBottomContainRightrt {
							width: 100%;
							height: 42%;
							display: flex;
							justify-content: space-between;
							align-items: center;
							border-radius: 20rpx;

							// 经营类别
							.containBottomtLeft {
								width: 52%;
								height: 70%;
								background-color: #adbdf9;
								color: #fff;
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 20rpx;
								overflow: hidden;
								text-overflow: ellipsis;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}

							// 编辑
							.containBottomtRight {
								width: 44%;
								height: 70%;
								background-color: #ade5f9;
								display: flex;
								align-items: center;
								justify-content: center;
								color: #fff;
								border-radius: 20rpx;
							}
						}

						// 详细信息
						.containBottomContainRightrb {
							width: 100%;
							height: 40%;
							display: flex;
							justify-content: center;
							align-items: center;
							font-weight: 800;
							font-size: 26rpx;

							.containBottomDetail {
								width: 100%;
								height: 50%;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}
		}
	}
</style>